<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import {
    CoffeeOutlined,
    CommentOutlined,
    FileOutlined,
    FormOutlined,
    FrownOutlined,
    HighlightOutlined,
    LineChartOutlined,
    PieChartOutlined,
    RocketOutlined,
    SafetyOutlined,
    SettingOutlined,
    SmileOutlined,
    TableOutlined,
    TeamOutlined,
    UploadOutlined
} from '@ant-design/icons-vue'
import { MenuProps } from 'ant-design-vue'
import { RouteLocationRaw, useRoute, useRouter } from 'vue-router'
import useMainStore from '@/store'
import { getValInObj } from '@/assets/utils/utils'

const router = useRouter(),
    route = useRoute(),
    store = useMainStore()
const selectedKey = computed({
        get() {
            return [route.path.replace('/home/', '')]
        },
        set() {}
    }),
    openKeys = ref<string[]>([''])
const handle_switchMenuItem: MenuProps['onClick'] = async e => {
    let navigateResult = await router.push(`/home/${e.key as RouteLocationRaw}`)
    if (navigateResult === undefined) {
        store.handle_setTag(
            getValInObj('key', e.key, tagList).title,
            `/home/${e.key}`
        )
    }
}

const tagList = reactive([
    { title: '数据分析', key: 'statistic', icon: LineChartOutlined },
    {
        title: '编辑',
        key: 'edit',
        icon: FileOutlined,
        subMenu: [
            {
                title: 'Mark Down编辑器',
                key: 'markdown',
                icon: HighlightOutlined
            },
            { title: '富文本编辑器', key: 'richText', icon: FormOutlined },
            { title: '选择图标', key: 'icon', icon: SmileOutlined }
        ]
    },
    { title: '卡片', key: 'games', icon: RocketOutlined },
    { title: '上传文件', key: 'upload', icon: UploadOutlined },
    { title: '系统消息', key: 'message', icon: CommentOutlined },
    {
        title: '特殊页面',
        key: 'special',
        icon: CoffeeOutlined,
        subMenu: [
            { title: '管理员', key: 'manager', icon: SafetyOutlined },
            { title: '404', key: '404', icon: FrownOutlined }
        ]
    },
    { title: '表单', key: 'form', icon: TeamOutlined },
    { title: '基本表格', key: 'orders', icon: TableOutlined },
    { title: '图标', key: 'chart', icon: PieChartOutlined },
    { title: '设置', key: 'setting', icon: SettingOutlined }
])
defineExpose({
    tagList
})
</script>

<template>
    <div class="aside-menu">
        <div class="logo flex-column align-center justify-center">
            <div class="logo-title">Games Mall</div>
        </div>
        <a-menu
            v-model:selectedKeys="selectedKey"
            v-model:open-keys="openKeys"
            mode="inline"
            theme="dark"
            @click="handle_switchMenuItem"
        >
            <div
                v-for="(data, index) in tagList"
                :key="index"
            >
                <template v-if="!data.subMenu">
                    <a-menu-item :key="data.key">
                        <template #icon>
                            <component :is="data.icon" />
                        </template>
                        <span class="nav-title">{{ data.title }}</span>
                    </a-menu-item>
                </template>
                <template v-if="data.subMenu">
                    <a-sub-menu :key="index">
                        <template #icon>
                            <component :is="data.icon" />
                        </template>
                        <template #title>
                            <span class="nav-title">{{ data.title }}</span>
                        </template>
                        <div
                            v-for="(sub, subIndex) in data.subMenu"
                            :key="subIndex"
                        >
                            <a-menu-item :key="sub.key">
                                <template #icon>
                                    <component :is="sub.icon" />
                                </template>
                                <span class="sub-title">{{ sub.title }}</span>
                            </a-menu-item>
                        </div>
                    </a-sub-menu>
                </template>
            </div>
        </a-menu>
    </div>
</template>

<style lang="scss" scoped>
.aside-menu {
    .logo {
        height: 100px;
        text-align: center;
        background: #001529;

        .logo-title {
            font-size: 26px;
            font-weight: 600;
            font-style: italic;
            color: #ffffff;
        }
    }

    & :deep(.ant-menu-item) {
        height: 60px !important;
        line-height: 60px !important;
    }

    & :deep(.anticon) {
        min-width: 20px !important;
        font-size: 20px !important;
    }

    .nav-title {
        font-size: 17px;
        font-weight: 300;
    }

    .sub-title {
        font-size: 15px;
        font-weight: 300;
    }
}
</style>
